<template>
	<div class="system-role-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<!-- <el-form-item label="角色名称">
            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
          </el-form-item> -->
					<!-- <el-form-item label="筛选">
						<el-tree-select v-model="value" :data="data" filterable />
					</el-form-item> -->
					<Sousuo @customEvent="handleCustomEvent" :urllist="urllist" ref="childRef"> </Sousuo>
					<el-form-item label="ID">
						<el-input v-model="uuid" :placeholder="'请输入ID'" class="w-50 m-2" size="default"
							@input="keywordChangeid()" />
					</el-form-item>
					<el-form-item label="日期筛选"  >
						<el-date-picker v-model="tableData.param.dateRange" type="daterange" unlink-panels range-separator="To"  value-format="YYYY-MM-DD"  format="YYYY-MM-DD"
							start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" :size="size" @change="yearlist" />
					</el-form-item>
					<el-form-item>
						<!-- <el-button size="default" type="primary" class="ml10" @click="roleList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询 
						</el-button> -->

						<el-button size="default" type="primary" class="ml10" @click="Refresh">
							<!-- <el-icon><Refresh /></el-icon> -->
							刷新页面
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
				<el-table-column fixed prop="id" width="80" label="ID 
" show-overflow-tooltip></el-table-column>
				<el-table-column prop="billNo"  label="交易流水号"></el-table-column>
				<el-table-column prop="userId"  label="用户ID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="realname"   label="充值人名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="amount"  label="充值金额" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="支付状态"  show-overflow-tooltip></el-table-column>
				<!-- <el-table-column fixed="right" label="操作" width="80">
					<template #default="scope">
						<el-button size="small" text type="primary"
							@click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>审核</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="roleList"
      />
		</el-card>
		<MemberListadd ref="editRoleRef" @getRoleList="roleList" />
		<Adjusting_Balance ref="Adjusting" @getRoleList="roleList" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
import MemberListadd from './component/berListadd.vue'; 
import { apirechargeList } from '/@/api/financialmanagement/financialmanagementlevel';
import Sousuo from '/@/components/sousuo/index.vue';
//日期筛选
const value1 = ref('');
const value2 = ref('');
const size = ref<'default' | 'large' | 'small'>('default');
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];

// 定义接口来定义对象的类型
interface TableData {
	id:string,
	billNo: string,//交易流水号
	userId: string,//用户id
	realname: string,//充值人名称
	amount: number,//充值金额
	status: string,//支付状态

	// queryParams:Array<TableData>;
}

interface TableDataState {
	tableData: {
		queryParams: {
			title: string;
			component: string;
		};
		sourceData: Array<sourceDataff>;
		data: Array<TableData>;
		total: number;
		loading: boolean;
		param: {
			dateRange:string[];
			userId: string;
			pageNum: number;
			pageSize: number;
		};
	};
}
interface sourceDataff {
	value: string;
	label: string;
}
export default defineComponent({
	name: 'apiV1SystemRoleList',
	components: { MemberListadd,Sousuo},
	setup() {
		const childRef = ref<any>()
		const uuid = ref();
		const urllist = '';
		const addRoleRef = ref();
		const editRoleRef = ref();
		const Adjusting = ref();
		const dataScopeRef = ref();
		const value = ref();
		const state = reactive<TableDataState>({
			tableData: {
				queryParams: {
					title: '',
					component: '',
				},
				data: [],
				sourceData: [
					{ value: '0', label: 'ID' },
					{ value: '1', label: '用户名' },
					{ value: '2', label: '支付方式' },
				],
				total: 0,
				loading: false,
				param: {
					dateRange:[],
					userId: '',
					pageNum: 1,
					pageSize: 10,
				},
			},
		});
	//日期搜索
	const yearlist = () => {
			roleList();
		};
		// 初始化表格数据
		const initTableData = () => {
			roleList();
		};
	//文本框搜索
	const keywordChangeid = () => {
			state.tableData.param.userId = uuid.value
			roleList();
		};
//查询按钮
const chaxun = () => {

};
		const roleList = () => {
			const data: Array<TableData> = [];
			apirechargeList(state.tableData.param).then((res) => {
				const list = res.data.list ?? [];
				list.map((item: TableData) => {
					switch (item.status) {
						case 'pending':
						item.status = '待确定'
							break;
						case 'confirm':
						item.status = '已确认'
							break;
						case 'success':
						item.status = '成功'
							break;
							case 'failed':
						item.status = '失败'
							break;
						default:
					}
					data.push({
						
						id:item.id,
	billNo: item.billNo,//交易流水号
	userId: item.userId,//用户id
	realname: item.realname,//充值人名称
	amount: item.amount,//充值金额
	status: item.status,//支付状态
					});
				});
				state.tableData.data = data;
				state.tableData.total = res.data.total;
			});
		};
//组件回调
const handleCustomEvent = (data: any) => {
			state.tableData.param.userId = data.value
			roleList();
		};
		const data = ref(state.tableData.sourceData);
		//筛选
		// const filterable = (value: any) => {
	
		// };
		// 打开审核弹窗
		const onOpenEditRole = (row: Object) => {
			editRoleRef.value.openDialog(toRaw(row));
		};
		
		// 刷新页面
		const Refresh = () => {
			state.tableData.param.userId = '';
			uuid.value = '';
			state.tableData.param.dateRange = [];
			childRef.value.hello("hello world！")
			roleList();
		};

		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
		};
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		});

		return {
			keywordChangeid,
			uuid,
			urllist,
			value,
			Adjusting,
			addRoleRef,
			editRoleRef,
			dataScopeRef,
			onOpenEditRole,
			onHandleSizeChange,
			onHandleCurrentChange,
			roleList,
			Refresh,
			...toRefs(state),
			data,
			size,
			shortcuts,
			value2,
			value1,
			chaxun,
			childRef,
			yearlist,
			handleCustomEvent
		};
	}, 
});
</script>
